﻿<template>
	<div>
		<transition name="fade">
			<div class="detail" v-show="detailFlag">
				<div class="header">
					{{infoDetail.parkName}}
					<i class="el-icon-close" @click="$emit('close')"></i>
				</div>
				<div class="content">
					<div class="picWrapper">
						<el-tabs v-model.trim="activeName" @tab-click="">
							<el-tab-pane label="入场照片" name="first">
								<div class="picBox">
									<div class="title">
										全景照片
									</div>
									<div class="pic">
										<img :src="infoDetail.fullImage" width="100%" height="100%" @click="showBigPic(infoDetail.fullImage)"/>
									</div>
								</div>
								<div class="picBox">
									<div class="title">
										车辆照片
									</div>
									<div class="pic">
										<img :src="infoDetail.featureImage" width="100%" height="100%" @click="showBigPic(infoDetail.featureImage)"/>
									</div>
								</div>
								<div class="picBox">
									<div class="title">
										车牌照片
									</div>
									<div class="pic">
										<img :src="infoDetail.plateImage" width="100%" height="100%" @click="showBigPic(infoDetail.plateImage)"/>
									</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="出场照片" name="second">
								<div class="picBox">
									<div class="title">
										全景照片
									</div>
									<div class="pic">
									<img :src="infoDetail.exitFullImage" width="100%" height="100%" @click="showBigPic(infoDetail.exitFullImage)"/>
									</div>
								</div>
								<div class="picBox">
									<div class="title">
										车辆照片
									</div>
									<div class="pic">
									<img :src="infoDetail.exitFeatureImage" width="100%" height="100%" @click="showBigPic(infoDetail.exitFeatureImage)"/>
									</div>
								</div>
								<div class="picBox">
									<div class="title">
										车牌照片
									</div>
									<div class="pic">
										<img :src="infoDetail.exitPlateImage" width="100%" height="100%" @click="showBigPic(infoDetail.exitPlateImage)"/>
									</div>
								</div>
							</el-tab-pane>
						</el-tabs>
					</div>
					<div class="infoWrapper">						
						<TitleModule title="停车信息"></TitleModule>
						<!--<div class="info">
							<ul class="infoItem" v-for="info in infoList">
								<li v-for="item in info">
									<span class="label">{{item.label}}</span>：
									<span class="value" :style="item.style">{{infoDetail[item.value]}}</span>
								</li>
							</ul>
						</div>-->
						<InfoList :infoSize="infoSize" :infoData="infoData" :infoDetail="infoDetail"></InfoList>
					</div>
					<div class="footer">
						<el-button @click="$emit('clickBtn', 'pre')">上一页</el-button>
						<el-button @click="$emit('clickBtn', 'next')">下一页</el-button>
					</div>

				</div>
			</div>
		</transition>
		<transition name="fade">
			<div class="mask" v-show="detailFlag" @click="$emit('close')">

			</div>			
		</transition>
		<transition name="fade">
			<div class="mask" v-show="bigPic" :style="{'z-index': '10000', 'background-image': picUrl}" @click="bigPic=false">
				
			</div>
		</transition>
	</div>
</template>
<script>
import TitleModule from '../titleModule/titleModule'
import InfoList from '../infoList/infoList'
export default {
  data () {
    return {
    	activeName: 'first',
    	bigPic: false,
    	picUrl: '',
    	defaultImg: "car-pic.png"
    }
  },
  mounted () {
  },
  computed: {
  },
  methods: {
  	showBigPic (url) {
  		if (!url) {
  			return false;
  		}
  		this.picUrl = `url("${url}")`;
  		this.bigPic = true;  		
  	}
  },
  props: {
  	infoData: {
  		default: {}
  	},
  	infoSize: {
  		type: Number,
  		default: 6
  	},
  	infoDetail: {
  		default: {}
  	},
  	detailFlag: {
  		default: false
  	}
  },
  components: {
  	TitleModule,
  	InfoList
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
	.fade-enter-active, .fade-leave-active {
	  transition: opacity 0.5s
	}
	.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
	  opacity: 0
	}
.detail
	width: 61.4%;
	height: 82.9%;
	position: absolute;
	top: 8.6%;
	left: 20.1%;
	background: #FFFFFF;
	box-shadow: 0 0 4px 1px rgba(128,145,165,0.30);
	border-radius: 3px;	
	z-index: 1000;
	box-sizing: border-box;
	padding: 20px 0;
	.header
		position: absolute;
		background: #3F4A56;
		border-radius: 3px 3px 0 0;
		color: #fff;
		width: 100%;
		top: 0;
		left: 0;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		padding: 0 12px;
		box-sizing: inherit;
		z-index: 100;
		.el-icon-close
			float: right;
			margin-top: 14px;
	.content
		margin-top: 20px;
		padding: 2.1%;	
		height: 100%;
		overflow: auto;
		box-sizing: inherit;
		.picWrapper
			.picBox
				float: left;
				width: 33.33333%;
				padding: 15px;
				box-sizing: border-box;
			.title
				font-family: MicrosoftYaHei;
				font-size: 12px;
				color: #8091A5;
				letter-spacing: 0;
				line-height: 16px;
			.pic
				background: url("car-pic.png") center no-repeat;
				width: 100%;
				height: 150px;
				border: 1px solid #8091A5;
				margin-top: 10px;
				overflow: hidden;
		.infoWrapper
			border-top: 1px solid #D3DCE6;
			padding-top: 20px;
			.title
				height: 42px;
				line-height: 42px;
				color: #8391a5;
				font-size: 14px;
				width: 100%;
				border-bottom: 1px solid #d1dbe5;    
				margin: 0 0 15px;
		 	.info
				font-size: 12px;
				color: #313541;
				letter-spacing: 0;
				line-height: 32px;
				overflow: hidden;
				.infoItem
					width: 33.3333%;
					box-sizing: border-box;
					float: left;
					.label
						width: 100px;
						text-align: right;
						display: inline-block;
		.footer
			clear: both;
			text-align: center;
			margin-top: 50px;
.mask
	background: rgba(49,53,65,0.60) no-repeat center/contain;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
</style>
